<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<statusBar></statusBar>
		<!-- #endif -->
        <!-- banner -->
        		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
        			field="_id,bannerfile,open_url,title" @load="onqueryload">
        			<!-- 当无banner数据时显示占位图 -->
        			<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png" mode="aspectFill" :draggable="false" />
        			
        			<swiper v-else class="swiper-box" @change="changeSwiper" :current="current" indicator-dots>
        				<swiper-item v-for="(item, index) in data" :key="item._id">
        					<view class="swiper-item" @click="clickBannerItem(item)">
        						<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
        					</view>
        				</swiper-item>
        			</swiper>
        		</unicloud-db>
			
		<view class="Message Center">
			<view class="Message-content">
				<uni-card title="" margin="5px" >
					<view class="grid-item-box-Patientcard">	
						<text class="card-description">消息中心</text>
					</view>
				</uni-card>
			 </view>
		</view>
  
				<!-- 书籍列表开始 -->
				<view class="bookList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="Hopital">
					<view v-if="error">{{error.message}}</view>
					<view v-else>
					<uni-list>
					<uni-list-item v-for="(item, index) in data">
					  <template v-slot:header>
					    <view class="slot-box">
					      <image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
					    </view>
					  </template>
					  <template v-slot:body>
					      <view class="bookName">
					        <text>{{item.bookName}}</text>
					      </view>
					      <view class="author">
					        <text>{{ item.author }}</text>
							<text> | {{ item.classify }}</text>
					      </view>
						  <view class="price">
						    <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
						    <text>&nbsp;</text>
						    <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
						    </view>
					    </template>
					</uni-list-item>
					</uni-list>
					</view>
					</unicloud-db>
				</view>
				<!-- 书籍列表结束 -->		
		
		
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	// #endif
	export default {
		// #ifdef APP-PLUS
		components: {
			statusBar
		},
		// #endif
		data() {
			return {
				gridList: [],
				current: 0,
				hasLogin:false,

			}
		},
		onShow() {
			this.hasLogin = uniCloud.getCurrentUserInfo().tokenExpired > Date.now()
		},
		onLoad() {
			let gridList = []
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.visibleToAll') )
			}
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.invisibleToTourists') )
			}
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.adminVisible') )
			}
			this.gridList = gridList
		},
		methods: {
   getYuan(data){
        let yuan = Math.floor(data / 100)
        let fen = data % 100
        if(fen == 0) fen = "00"
        return yuan+'.'+fen
      },
			change(e) {
				uni.showToast({
					title:this.$t('grid.clickTip') + " " + `${e.detail.index + 1}` + " " + this.$t('grid.clickTipGrid'),
					icon: 'none'
				})
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				if (item.open_url) {
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// 其余业务处理
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	/* #endif */
	
	.section-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}
	.decoration{
		width: 4px;
		height: 12px;
		border-radius: 10px;
		background-color: #2979ff;
	}
	.section-text{
		color: #333;
		margin-left: 15rpx;
	}

	/* #ifdef APP-NVUE */
	.warp {
		background-color: #fff;
	}
	/* #endif */

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.big-number{
		font-size: 50rpx;
		font-weight: 700;
		font-stretch: condensed;
		font-style:oblique;
	}
	
	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE || VUE3*/
	::v-deep
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE || VUE3 */
	::v-deep
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}
	.Message-content {
		text-align: center;
	}
	
	
	
	
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 100rpx;
	  height: 100rpx;
	}
	.bookName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.author{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.price {
	  display: flex;
	  flex-direction: row;
	  line-height: 40rpx;
	}
.cheapPrice{
  font-size: 40rpx;
  color: #FFFFFF;
}
.bookPrice{
  font-size: 24rpx;
  color: #FFFFFF;
  text-decoration-line: line-through;
}
</style>
